<template>
  <div
    class="derOnlyOneContainer _containers"
    :style="{
      transformOrigin: 'top left',
      left: `${left}px`,
      top: `${top}px`,
    }"
  >
    <div class="contentBox">
      <iframe :src="uri" frameborder="no" border="0"></iframe>
    </div>
    <Title title="课堂评价" @close="close" @getPosition="getPosition" />
  </div>
</template>

<script>
import closeIcon from '../../../assets/teaching/close.svg';
import Title from '../panel/title.vue';
import { getToken, getStorage } from '../../../utils/storage';

export default {
  components: { Title },
  props: { value: Boolean },
  data() {
    const token = getToken('token');
    const schoolId = getStorage('schoolId');
    const uri = `${import.meta.env.VITE_IFRAME_URI_PREFIX}#/evaluate?token=${token}&schoolId=${schoolId}`;
    // console.log('token    =======================> ', token);
    // console.log('schoolId =======================> ', schoolId);
    console.log('uri ===> ', uri);
    return {
      closeIcon,
      left: 0,
      top: 0,
      uri,
    };
  },
  watch: {},
  created() {},

  methods: {
    // Title 组件返回的 x, y值
    getPosition({ x, y }) {
      this.left = x;
      this.top = y;
    },
    close() {
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss" scoped>
._containers {
  width: 68em;
  padding-top: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  // cursor: move;
  position: relative;

  // 开发内容
  .contentBox {
    height: 38em;

    iframe {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
